<script setup>
import HeaderBar from "@/components/HeaderBar.vue";
import { ref } from "vue";

const selectedKey = ref("info");

const sections = ref([
  { key: "info", label: "个人信息", content: "姓名、性别、联系方式等。" },
  { key: "status", label: "求职状态", content: "离职-随时到岗。" },
  { key: "advantage", label: "个人优势", content: "丰富的个人优势介绍。" },
  { key: "job", label: "期望职位", content: "全职职位，安全评价师。" },
  { key: "city", label: "工作城市", content: "北京、上海等一线城市。" },
  { key: "work", label: "工作经历", content: "详细的工作经历列表。" },
  { key: "projects", label: "项目经验", content: "项目经验描述。" },
  { key: "education", label: "教育经历", content: "湖南大学软件工程专业。" },
]);

const selectKey = (key) => {
  selectedKey.value = key;
  const targetElement = document.getElementById(`card-${key}`);
  if (targetElement) {
    const container = document.querySelector(".cards-container");
    const containerWidth = container.offsetWidth;
    const targetPosition = targetElement.offsetLeft - containerWidth / 2 + targetElement.offsetWidth / 2;
    container.scrollTo({ left: targetPosition, behavior: "smooth" });
  }
};
</script>

<template>
  <div class="resume-page">
    <div class="headbar-container">
      <HeaderBar />
    </div>
    <div class="main-container">
      <div class="cards-container">
        <div
          v-for="section in sections"
          :key="section.key"
          :id="`card-${section.key}`"
          class="card"
          :class="{ selected: section.key === selectedKey }"
          @click="selectKey(section.key)"
        >
          <h2>{{ section.label }}</h2>
          <p>{{ section.content }}</p>
        </div>
      </div>
    </div>
    <div class="slider-bar"></div>
    <div class="menu-bar">
      <div
        v-for="section in sections"
        :key="section.key"
        :class="['menu-item', { active: section.key === selectedKey }]"
        @click="selectKey(section.key)"
      >
        {{ section.label }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.resume-page {
  width: 100%;
  height: 100vh;
  background-color: #f5f6fa;
  display: flex;
  flex-direction: column;
  position: relative;
}

.headbar-container {
  height: 50px;
  width: 100%;
}

.main-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.cards-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  width: 100%;
  height: calc(100vh - 100px);
  padding: 20px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.card {
  flex: 0 0 60%;
  margin: 0 10px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.6s, opacity 0.3s;
  scroll-snap-align: center;
  opacity: 0.7;
  transform: translateX(0);
}

.card.selected {
  transform: scale(1.1) translateX(0);
  opacity: 1;
  margin: 100px;
}

.menu-bar {
  height: 80px;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.menu-item {
  flex: 1;
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.6s, color 0.6s;
  transform: translateX(0);
}

.menu-item.active {
  color: white;
  font-weight: bold;
  background-color: #00bebd;
  border-radius: 10px;
  transform: translateY(-4px);
}

::-webkit-scrollbar {
  color: #00b4b3;
}

::-webkit-scrollbar-thumb {
  background-color: #00b4b3;
}
</style>



